<template>
  <!-- 充值 -->
  <view class="recharge-page u-rela" :style="my_style">
    <view class="u-p-24 flex-between fww">
      <view class="item flex-center font-48" v-for="(item, index) in list" :key="index">
        {{ item }}元
      </view>
    </view>
    <input class="money" type="text" value="" placeholder="请输入任意金额" />
    <view class="footer">
      <view @click="recharge" class="footer-primary-btn flex-center">立即支付</view>
    </view>
    <view class="u-text-center agree"
      ><text class="light-color">充值即为同意</text>
      <text class="font-weight-500">《充值协议》</text>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list: ['100', '200', '300'],
      }
    },
    onLoad(options) {},
    methods: {
      recharge() {
        let info = {
          title: '充值',
          tip: '<p>¥100充值成功</p>',
          btn: '返回我的账户',
          link: '/views/user/account/index',
        }
        this.successGo(`?info=${encodeURIComponent(JSON.stringify(info))}`)
      },
    },
  }
</script>

<style lang="scss" scoped>
  .recharge-page {
    height: 100%;

    .item {
      width: calc((100vw - 72rpx) / 2);
      height: 176rpx;
      margin-bottom: 24rpx;
      background: #fff;
      border-radius: 8rpx;

      &.active {
        color: #fff;
        background: var(--color);
      }
    }

    .money {
      width: 100%;
      height: 100rpx;
      padding: 0 24rpx;
      background: #fff;
    }

    .footer {
      padding: 188rpx 24rpx 0;
    }

    .agree {
      position: fixed;
      bottom: 24rpx;
      width: 100%;
    }
  }
</style>
